# Including and Post 0.6.2

The body tag no longer has an active_admin class added to it, as of this change:
* https://github.com/gregbell/active_admin/pull/1952/files

This means that active_admin no longer conflicts with the ckeditor styles.

There are some problems with ckeditor working with the `float: left` css property set on the formtastic labels. 

To quickly bypass this you can remove the float from the label:
```js
$(document).ready(function(){
  if ( $('#ckeditor').length ) 
    CKEDITOR.replace( 'ckeditor' );
  if ( $('#ckeditor').prev('label').length ) 
    $('#ckeditor').prev('label').css('float','none');
});
```

or disable label : 
```
  input :body, as: :ckeditor, label: false
```

You can also add `margin-left: 20%` to the replacement tag `#cke_ckeditor` and get close to the default active_admin layout.

These are all hacks, and there are better ways to do this.

# Pre 0.6.2

### Integration with Ckeditor using the [galetahub/ckeditor](https://github.com/galetahub/ckeditor/) gem:
Follow the instructions for galetahub/ckeditor (gem, mount in routes and rails generate for your file uploads if wanted), then add the following to /config/initializers/active_admin.rb
```ruby
# To load a javascript file:
config.register_javascript 'ckeditor/init.js'
```
In your resource you'll need to add to your form:
```ruby
form do |f|
  f.inputs do
    f.input :foo
    f.input :bar, :as => :ckeditor
  end
  f.actions
end
```
And your almost done, you can now use Ckeditor in active_admin, however everyone who manages to access Ckeditor can browse CKeditor uploads and add to them. galetahub/Ckeditor has methods to restrict acces using CanCan, I advise you read through the documentation of CanCan integration both for Ckeditor and Active Admin to make this work.

I've also found it necessary to add to app/assets/stylesheets/active_admin.css.scss to fit it to on the form:
```scss
.cke_chrome {
  width: 79.5% !important;
  overflow: hidden;
}
```

### Integration with native Ckeditor 
If you prefer to use the native Ckeditor directly (without a gem) [http://ckeditor.com](http://ckeditor.com)

1. download ckeditor into vendor/assets/javascripts/ckeditor/

2. edit config/initializers/active_admin.rb with
    
    config.register_javascript "ckeditor/ckeditor"  

3. change the js variable `CKEDITOR_BASEPATH` to `/assets/ckeditor/` so it also works in production with Rails 3.2 asset pipeline. [See documentation](http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Specifying_the_Editor_Path). You can do this in `app/assets/javascripts/active_admin.js`:
    
    var CKEDITOR_BASEPATH = '/assets/ckeditor/';

You can then override the ckeditor defaults, by adding the corresponding files to your app/assets, such as app/assets/javascripts/config.js and app/assets/stylesheets/contents.css

One major caveat, the body.active_admin style (as in  < body class="active_admin" > ) bashes the cke styles in the toolbar. The only workaround I could find (so far) is to copy all the .css files from the skins (e.g. ckeditor/skins/moono/*.css to app/assets/stylesheets/ckeditor/skins/moono/*.css.scss , renaming them scss and then editing each file, wrapping the content with 
```scss
body.active_admin {
...
}
```
To achieve this with bash you can use following commands

```bash
for i in $(ls *css) ; do mv $i $i.scss ; done
sed -i '1s/^/body.active_admin { /' *scss
sed -i -e "\$a}" *scss
```

Or another quick fix would be to just add this (if you only need a quick fix for the buttons):
```scss
body.active_admin {
  .cke_toolbar {
    .cke_button {
      padding: 5px;
    }
  }
}
```